<template>
  <div>
    <!-- 表头：亏损值 / 奖金 -->
    <div class="tab_column">
      <div>{{ $t('activity.resgatar.header_loss_value') }}</div>
      <div>{{ $t('activity.resgatar.header_bonus') }}</div>
    </div>
    <!-- 列表内容区域 -->
    <div class="list">
      <!-- 无数据提示 -->
      <div v-if="!activityData.award_conf?.length" class="no_data">{{ $t('activity.resgatar.no_record') }}</div>
      <ul>
        <!-- 奖励配置行 -->
        <li v-for="(row, index) in (activityData.award_conf || [])" :key="index">
          <div>≥ -{{ row.game_lose }} {{ apo.config.getCurrencyName() }}</div>
          <div>{{ row.reward }} {{ apo.config.getCurrencyName() }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
// 属性声明（保持运行时行为一致）
defineProps<{ activityData: { award_conf?: Array<{ game_lose: number; reward: number }> } }>()
</script>

<style scoped lang="scss">
/* 表头样式 */
.tab_column {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #3F2E4B;
  border-radius: 0.3rem 0.3rem 0rem 0rem;
  height: 1rem;
  margin-top: 0.5rem;
  color: #fff;

  div {
    width: 100%;
    font-family: Arial;
    font-weight: 400;
    font-size: 0.42rem;
    text-align: center;
  }
}

/* 列表容器 */
.list {
  margin-bottom: 0.1rem;
  border-radius: 0 0 0.3rem 0.3rem;
  background: #312734;
  color: #fff;
  min-height: 9rem;
  position: relative;

  /* 空状态文案 */
  .no_data {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.5rem;
    font-weight: 700;
    opacity: 0.6;
    color: var(--theme-neutral1);
  }

  /* 列表行 */
  ul li {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    height: 1rem;
    line-height: 1rem;

    /* 列内容 */
    div {
      width: 100%;
      text-align: center;
      font-family: Arial;
      font-weight: 400;
      font-size: 0.37rem;
      color: #86718C;

      &:nth-child(2) {
        color: #FFD700;
      }
    }

    &:nth-child(even) {
      background: #3F2E4B;
    }
  }
}
</style>
